<script setup lang="ts">
import type { FormInstance } from 'element-plus'
import { ElMessage } from 'element-plus'
import { GetDataDetail, PutDetailsRedact } from '@/api/modules/merchandiseControl.ts'
import { GetSubjectOption } from '@/api/modules/subject.ts'

const router = useRouter()
const route = useRoute()

const id = route.query.id as string

const ruleFormRef = ref<FormInstance>()
const ruleForm: any = ref({
  actJson: [{
    actType: 0,
    actId: '',
    vipGiftTicketId: '',
    focaType: 1,
  }],
  productName: '',
  flag: 1,
  productNums: 0,
  marketPrice: '',
  salePrice: '',
  baseSaleCount: '',
  outProductCode: '',
  outProductGuiGe: '',
  weight: undefined,
  isActive: true,
  cdnqrCodeBGPicUrl: '',
  activeTime: '',
  isDeliver: '',
  cdnProductPhotoPic: '',
  coverImages: [],
  introduceImages: [],
  limitEveryBuyCount: '',
  limitOpenIdBuyCount: undefined,
  relateTicketBuyLimit: undefined,
  displayInShop: undefined,
  buyedFaTicketId: '',
  isRefuned: undefined,
  isUpdateAddress: undefined,
  videoUrl: '', // 视频介绍
  CoverVideoUrl: '', // 商品封面视频路径
  coverAutoPlay: 1,
  orderSaleType: 0,
  outProductCode2: '',
  outProductGuiGe2: '',
  closeKaiTuan: 0,
  limitKaiTuanCount: 0,
  picMoudle: [],
  subjectList: [
    {
      subjectId: 0,
      productId: 0,
      sort: 0,
      enable: true,
      desp: '',
    },
  ],
  saleMultiRoles: [],
})
const rules = reactive({
  productName: [
    { required: true, message: '请输入商品名称', trigger: 'blur' },
  ],
  flag: [
    { required: true, message: '请选择产品类型', trigger: 'blur' },
  ],
  productNums: [
    { required: true, message: '请输入商品总库存', trigger: 'blur' },
  ],
  marketPrice: [
    { required: true, message: '请输入市场价', trigger: 'blur' },
  ],
  salePrice: [
    { required: true, message: '请输入销售价', trigger: 'blur' },
  ],
  isActive: [
    { required: true, message: '请选择是否上架', trigger: 'blur' },
  ],
  baseSaleCount: [
    { required: true, message: '请输入虚拟销量', trigger: 'blur' },
  ],
  relateTicketBuyLimit: [
    { required: true, message: '请输入赠品券购买限制', trigger: 'blur' },
  ],
  buyedFaTicketId: [
    { required: true, message: '请输入发券ID', trigger: 'blur' },
  ],
  outProductCode: [
    { required: true, message: '请输入外部商品编码', trigger: 'blur' },
  ],
  weight: [
    { required: true, message: '请输入商品重量', trigger: 'blur' },
  ],
  limitEveryBuyCount: [
    { required: true, message: '请输入每次限购数量', trigger: 'blur' },
  ],
  limitOpenIdBuyCount: [
    { required: true, message: '请输入每人限购数量', trigger: 'blur' },
  ],
  activeTime: [
    { required: true, message: '请选择上架日期', trigger: 'blur' },
  ],
  cdnProductPhotoPic: [
    { required: true, message: '请上传商品封面图', trigger: 'blur' },
  ],
  coverImages: [
    { required: true, message: '请上传封面Banner', trigger: 'blur' },
  ],
  introduceImages: [
    { required: true, message: '请上传商品简介图', trigger: 'blur' },
  ],
  eventEntryBanner: [
    { required: true, message: '请上传活动入口Banner', trigger: 'blur' },
  ],
  displayInShop: [
    { required: true, message: '请选择是否在商城展示', trigger: 'blur' },
  ],
  isRefuned: [
    { required: true, message: '请选择是否可退单', trigger: 'blur' },
  ],
  isUpdateAddress: [
    { required: true, message: '请选择是否允许修改收货地址', trigger: 'blur' },
  ],
  guiGeType: [
    { required: true, message: '请选择规格类型', trigger: 'blur' },
  ],
})
const productTypeArr = [
  { label: '正常商品', value: 1 },
  { label: '积分商品', value: 2 },
  { label: '秒杀商品', value: 3 },
  { label: '派样秒杀', value: 4 },
  { label: '拼团商品', value: 5 },
  { label: '援疆商品', value: 6 },
  { label: '品牌官商品', value: 7 },
  // { label: '预售商品', value: 9 },
  // { label: '兑换商品', value: 10 },
  // { label: '组合商品（多规格任选2件）', value: 11 },
]

const OptionObj = reactive({
  subjectOption: [],
})

function AddCard(key: string) {
  // console.log(ruleForm.value)

  if (key === 'picMoudle') {
    if (ruleForm.value.picMoudle?.length >= 1) {
      ElMessage.error('目前最多添加一个')
      return
    }
  }
  const defaultObjects = {
    subjectList: {
      subjectId: 0,
      productId: 0,
      sort: 0,
      enable: true,
      desp: '',
    },
    actJson: {
      actType: 0,
      actId: 0,
      vipGiftTicketId: 0,
      focaType: 1,
    },
    picMoudle: {
      pic: '',
      href: '',
    },
  }
  // 根据key获取对应的默认对象
  // eslint-disable-next-line ts/ban-ts-comment
  // @ts-expect-error
  const defaultObject = defaultObjects[key]

  if (defaultObject && ruleForm.value[key]) {
    ruleForm.value[key].push({ ...defaultObject })
  }
  else {
    ruleForm.value[key] = [{ ...defaultObject }]
  }
}

const activeNames = ref([0])

function addProductGuiGe() {
  if (ruleForm.value.productGuiGeList) {
    ruleForm.value.productGuiGeList.push({
      productId: id || 0,
      guiGeName: '',
      cdnGuiGePhotoPic: '',
      productNums: 0,
      baseSaleCount: 0,
      marketPrice: 0,
      salePrice: 0,
      costPrice: 0,
      isActive: 0,
      sortTag: 0,
      weight: 0,
      size: 0,
      outProductCode: '',
      outProductGuiGe: '',
      desp: '',
      role3SalePrice: 0,
      role2SalePrice: 0,
    })
  }
  else {
    ruleForm.value.productGuiGeList = [
      {
        productId: id || 0,
        guiGeName: '',
        cdnGuiGePhotoPic: '',
        productNums: 0,
        baseSaleCount: 0,
        marketPrice: 0,
        salePrice: 0,
        costPrice: 0,
        isActive: 0,
        sortTag: 0,
        weight: 0,
        size: 0,
        outProductCode: '',
        outProductGuiGe: '',
        desp: '',
        role3SalePrice: 0,
        role2SalePrice: 0,
      },
    ]
  }
}

function DeleteProductGuiGe(index: number) {
  ruleForm.value.productGuiGeList.splice(index, 1)
}

function handleUploadSuccess(urls: string, key: string, type?: string, index?: number) {
  if (type) {
    ruleForm.value[key][index as number].pic = urls
  }
  else {
    ruleForm.value[key] = urls
  }
}

function GuiGeListSetPic(url: string, index: number) {
  ruleForm.value.productGuiGeList[index].cdnGuiGePhotoPic = url
}

function DeleteItem(index: number, key: string) {
  ruleForm.value[key].splice(index, 1)
}
function DeletePicMoudle(index: number) {
  ruleForm.value.picMoudle.splice(index, 1)
}

// 编辑
async function SubmitData(formEl: FormInstance | undefined) {
  if (!formEl) {
    return
  }
  await formEl.validate((valid) => {
    if (valid) {
      const params = { ...ruleForm.value }
      // params.introduceImages.splice(0, 1)
      // params.introduceImages.unshift('/upload/harpbh202502251414221987.png')
      params.subjectList = params.subjectList.map((item: any) => {
        item.productId = Number(id)
        return item
      })

      params.productId = id
      const processedActJson = computed(() => {
        return params.actJson?.filter((item: any) => {
          if (item.actType === 2) {
            delete item.vipGiftTicketId // 删除 vipGiftTicketId 字段
          }
          // 返回 true 以保留该项，如果是 actType !== 2 的项也会被保留
          return item.actType !== 2 || true
        })
      })
      params.actJson = processedActJson.value
      if (params.actJson) {
        params.actJson = params.actJson.filter((item: any) => item.actType !== 0)
      }

      if (params.guiGeType === 1) {
        let GuiGeNums = 0
        let GuiGeSaleCount = 0
        params.productGuiGeList.forEach((item: any) => {
          GuiGeNums += Number(item.productNums)
          GuiGeSaleCount += Number(item.baseSaleCount)
        })
        params.productNums = GuiGeNums
        params.baseSaleCount = GuiGeSaleCount
      }
      // if (params.actJson && params.actJson.length !== 0) {
      //   params.actJson.forEach ((item: any) => {
      //     if (item.actType === 2) {
      //       item.actId = '1000112'
      //     }
      //   })
      // }

      // params.picMoudle[0].href = '/pages/lottery/lottery?DrawId=1000109'

      // params.introduceImages.splice(1, 1)
      // params.introduceImages.push('/upload/ufvmaw202503181649135935.jpg')
      // params.introduceImages.unshift('/upload/ydfits202503181649285052.jpg')

      if (params.flag !== 7) {
        delete params.saleMultiRoles
      }
      // console.log(params)

      PutDetailsRedact(params).then((res: any) => {
        if (res.statusCode === 200) {
          ElMessage.success('编辑成功')
          router.push({
            name: 'MerchandiseControl',
          })
        }
        else {
          if (typeof res.errors === 'string') {
            ElMessage.error(`编辑失败。${res.errors}`)
          }
          else {
            let errorStr = ''
            for (const key in res.errors) {
              errorStr += `${key}：${res.errors[key]}；`
            }
            ElMessage.error(`编辑失败。${errorStr}`)
          }
        }
      })
    }
    else {
      ElMessage.error('请检查表单')
    }
  })
}

onMounted(async () => {
  if (id) {
    await GetDataDetail(id).then((res: any) => {
      if (res.statusCode === 200) {
        ruleForm.value = res.data

        if (!ruleForm.value.saleMultiRoles || ruleForm.value.saleMultiRoles.length === 0) {
          ruleForm.value.saleMultiRoles = [{
            roleId: 2,
            salePrice: '',
          }]
        }
      }
      else {
        ElMessage.error(`获取失败。${res.errors}`)
      }
    })
  }
  await GetSubjectOption().then((res: any) => {
    OptionObj.subjectOption = res.data
  })

  watch(ruleForm, (newValue) => {
    if (newValue.flag === 2 || newValue.flag === 3) {
      ruleForm.value.isRefuned = 0
    }
    if (ruleForm.value.productName) {
      ruleForm.value.productName = ruleForm.value.productName.replace(
        /[^a-z0-9\u4E00-\u9FA5\s\u3010\u3011\u3001\uFF08\uFF09\uFF1A:./*+\-]/gi,
        '',
      )
    }
    if (ruleForm.value.zengpinCode) {
      ruleForm.value.zengpinCode = ruleForm.value.zengpinCode.replace(/[^a-z0-9\u4E00-\u9FA5 ]/gi, '')
    }

    if (ruleForm.value.saleMultiRoles && ruleForm.value.saleMultiRoles.length === 0) {
      ruleForm.value.saleMultiRoles.push({
        roleId: 2,
        salePrice: '',
      })
    }
    else {
      if (newValue.flag === 7) {
        if (ruleForm.value.saleMultiRoles && ruleForm.value.saleMultiRoles.length === 0) {
          ruleForm.value.saleMultiRoles = [
            {
              roleId: 2,
              salePrice: '',
            },
          ]
        }
      }
    }
    // console.log(ruleForm.value.saleMultiRoles)
  }, { deep: true })
})
</script>

<template>
  <div>
    <PageHeader title="编辑" />
    <ElForm ref="ruleFormRef" label-position="top" label-width="80px" :rules="rules" :model="ruleForm">
      <PageMain title="产品分类">
        <ElRow :gutter="20">
          <ElCol :md="12">
            <ElFormItem label="专题信息">
              <el-button v-if="ruleForm.subjectList?.length === 0" type="primary" @click="AddCard('subjectList')">
                添加
              </el-button>
              <el-card v-for="(item, index) in ruleForm.subjectList" :key="index" shadow="hover" style="min-width: 350px;">
                <ElFormItem label="绑定专题">
                  <el-select v-model="item.subjectId" placeholder="请选择要绑定的专题">
                    <el-option
                      v-for="items in (OptionObj.subjectOption as any)"
                      :key="items.id" :label="`${items.id}-${items.subjectName}`" :value="items.id"
                    />
                  </el-select>
                </ElFormItem>
                <ElFormItem label="是否可用">
                  <el-switch v-model="item.enable" />
                </ElFormItem>
                <ElFormItem label="排序">
                  <el-input v-model="item.sort" placeholder="请输入排序" />
                </ElFormItem>
                <ElFormItem label="描述">
                  <el-input v-model="item.desp" placeholder="请输入描述" type="textarea" />
                </ElFormItem>
                <template #footer>
                  <div class="text-right">
                    <el-button type="danger" @click="DeleteItem(index, 'subjectList')">
                      删除
                    </el-button>
                  </div>
                </template>
              </el-card>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="基础信息">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="商品名称" prop="productName">
              <el-input v-model="ruleForm.productName" placeholder="请输入商品名称" maxlength="42" show-word-limit />
            </ElFormItem>
          </ElCol>
          <ElCol :md="10">
            <ElFormItem label="商品类型">
              <el-radio-group v-model="ruleForm.flag">
                <el-radio v-for="item in productTypeArr" :key="item.value" :value="item.value">
                  {{ item.label }}
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol :md="6">
            <ElFormItem label="是否上架" prop="isActive">
              <ElRadioGroup v-model="ruleForm.isActive">
                <ElRadioButton :value="true">
                  是
                </ElRadioButton>
                <ElRadioButton :value="false">
                  否
                </ElRadioButton>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
          <!-- <ElCol :md="8">
            <ElFormItem label="订单销量类型" prop="orderSaleType">
              <el-radio-group v-model="ruleForm.orderSaleType">
                <el-radio :value="0">
                  支付后记录销量
                </el-radio>
                <el-radio :value="1">
                  下单时记录销量
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol> -->
          <ElCol v-if="ruleForm.flag === 7" :md="8">
            <ElFormItem label="分销价" prop="salePrice">
              <el-input v-model="ruleForm.saleMultiRoles[0].salePrice" placeholder="请输入分销价" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="规格类型" prop="guiGeType">
              <el-radio-group v-model="ruleForm.guiGeType">
                <el-radio :value="0">
                  单规格
                </el-radio>
                <el-radio :value="1">
                  多规格
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.flag === 5" :md="8">
            <ElFormItem label="限制开团">
              <el-radio-group v-model="ruleForm.closeKaiTuan">
                <el-radio :value="0">
                  不限
                </el-radio>
                <el-radio :value="1">
                  限制开团
                </el-radio>
                <el-radio :value="2">
                  限制参团
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.flag === 5" :md="8">
            <ElFormItem label="限制每人开团数量">
              <el-input v-model="ruleForm.limitKaiTuanCount" placeholder="请输入限制每人开团数量" type="number" />
              <span class="tag">0为不限制</span>
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.flag === 5" :md="8">
            <ElFormItem label="拼团失败同步编码">
              <el-input v-model="ruleForm.outProductCode2" placeholder="请输入拼团失败同步编码" />
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.flag === 5" :md="8">
            <ElFormItem label="拼团失败同步规格编码">
              <el-input v-model="ruleForm.outProductGuiGe2" placeholder="请输入拼团失败同步规格编码" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem :label="`${ruleForm.flag === 3 ? '秒杀' : '上架'}时间`" prop="activeTime">
              <el-date-picker
                v-model="ruleForm.activeTime"
                format="YYYY-MM-DD HH:mm:ss"
                type="datetime"
                :placeholder="`请选择${ruleForm.flag === 3 ? '秒杀' : '上架'}时间`"
                style="max-width: 300px;"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="总库存" :prop="ruleForm.guiGeType === 1 ? '' : 'productNums'">
              <el-input v-model="ruleForm.productNums" placeholder="请输入总库存" type="number" :disabled="ruleForm.guiGeType === 1" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="市场价" prop="marketPrice">
              <el-input v-model="ruleForm.marketPrice" placeholder="请输入市场价" type="number" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="销售价" prop="salePrice">
              <el-input v-model="ruleForm.salePrice" placeholder="请输入销售价" type="number" />
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.guiGeType === 0 && ruleForm.flag !== 7" :md="8">
            <ElFormItem label="(推荐官) 一级售价" prop="role3SalePrice">
              <el-input v-model="ruleForm.role3SalePrice" placeholder="请输入一级售价" type="number" />
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.guiGeType === 0 && ruleForm.flag !== 7" :md="8">
            <ElFormItem label="(推荐官) 二级售价" prop="role2SalePrice">
              <el-input v-model="ruleForm.role2SalePrice" placeholder="请输入二级售价" type="number" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="虚拟销量" :prop="ruleForm.guiGeType === 1 ? '' : 'baseSaleCount'">
              <el-input v-model="ruleForm.baseSaleCount" placeholder="请输入虚拟销量" type="number" :disabled="ruleForm.guiGeType === 1" />
            </ElFormItem>
          </ElCol>
          <ElCol v-if="ruleForm.guiGeType === 0" :md="8">
            <ElFormItem label="重量" prop="weight">
              <el-input v-model="ruleForm.weight" placeholder="请输入重量" type="number">
                <template #append>
                  kg
                </template>
              </el-input>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="每次限购数量" prop="limitEveryBuyCount">
              <el-input v-model="ruleForm.limitEveryBuyCount" placeholder="请输入每次限购数量" type="number" />
              <span class="tag">0为不限购</span>
            </ElFormItem>
          </ElCol>
          <ElCol :md="(ruleForm.flag === 5 || ruleForm.flag === 7) ? 8 : 16">
            <ElFormItem label="每人限购数量" prop="limitOpenIdBuyCount">
              <el-input v-model="ruleForm.limitOpenIdBuyCount" placeholder="请输入每人限购数量" type="number" />
              <span class="tag">0为不限购</span>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="列表封面" prop="cdnProductPhotoPic">
              <ImageUpload :ext="['jpg', 'png']" :size="5" :max="1" :url="ruleForm.cdnProductPhotoPic" @on-success="(url) => handleUploadSuccess(url, 'cdnProductPhotoPic')" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="分享二维码背景图" prop="cdnqrCodeBGPicUrl">
              <ImageUpload :ext="['jpg', 'png']" :size="5" :max="1" :url="ruleForm.cdnqrCodeBGPicUrl" @on-success="(url) => handleUploadSuccess(url, 'cdnqrCodeBGPicUrl')" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="24">
            <ElFormItem label="封面Banner" prop="coverImages">
              <ImagesUpload :ext="['jpg', 'png']" :size="5" :max="9" :url="ruleForm.coverImages" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="24">
            <ElFormItem label="简介图" prop="introduceImages">
              <ImagesUpload :ext="['jpg', 'png']" :size="5" :max="40" :url="ruleForm.introduceImages" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="介绍视频">
              <FileUpload
                :size="512" :max="1"
                :ext="['mp4']" :url="ruleForm.CoverVideoUrl"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="视频介绍">
              <el-input v-model="ruleForm.videoUrl" style="width: 300px;" placeholder="请输入视频介绍" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="是否自动播放">
              <ElRadioGroup v-model="ruleForm.coverAutoPlay">
                <ElRadioButton :value="1">
                  是
                </ElRadioButton>
                <ElRadioButton :value="0">
                  否
                </ElRadioButton>
              </ElRadioGroup>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain v-if="ruleForm.guiGeType === 1" title="规格">
        <ElRow :gutter="20">
          <div>
            <el-button type="success" @click="addProductGuiGe">
              添加
            </el-button>
          </div>
          <ElCol v-if="ruleForm.productGuiGeList || ruleForm.productGuiGeList?.length !== 0" :md="24">
            <el-collapse v-model="activeNames">
              <el-collapse-item v-for="(item, index) in ruleForm.productGuiGeList" :key="item.guiGeId" :name="index">
                <template #title>
                  <span style=" margin-right: 10px;color: black;">
                    规格名称：
                  </span>
                  <el-input v-model="item.guiGeName" placeholder="请输入规格名称" />
                  <el-button type="danger" style="margin-left: 20px;" @click="DeleteProductGuiGe(index)">
                    删除
                  </el-button>
                </template>
                <ElRow :gutter="20">
                  <ElCol :md="7">
                    <ElFormItem label="封面" prop="cdnProductPhotoPic">
                      <ImageUpload width="100" height="100" :ext="['jpg', 'png']" :size="5" :url="item.cdnGuiGePhotoPic" @on-success="(url) => GuiGeListSetPic(url, index)" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="16">
                    <ElFormItem label="是否上架" prop="productGuiGeList.">
                      <el-switch
                        v-model="item.isActive"
                        class="ml-2"
                        :active-value="1" :inactive-value="0"
                      />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="总数量" prop="productGuiGeList.">
                      <el-input v-model="item.productNums" placeholder="请输入总数量" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="虚拟销量" prop="productGuiGeList.">
                      <el-input v-model="item.baseSaleCount" placeholder="请输入虚拟销量" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="市场价" prop="productGuiGeList.">
                      <el-input v-model="item.marketPrice" placeholder="请输入市场价" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="销售价" prop="productGuiGeList.">
                      <el-input v-model="item.salePrice" placeholder="请输入销售价" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="成本价" prop="productGuiGeList.">
                      <el-input v-model="item.costPrice" placeholder="请输入成本价" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="排序标识（倒序）" prop="productGuiGeList.">
                      <el-input v-model="item.sortTag" placeholder="请输入排序标识" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="重量">
                      <el-input v-model="item.weight" placeholder="请输入重量" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <!-- <ElCol :md="6">
                    <ElFormItem label="尺寸">
                      <el-input v-model="item.size" placeholder="请输入尺寸" type="number" />
                    </ElFormItem>
                  </ElCol> -->
                  <ElCol :md="6">
                    <ElFormItem label="外部商品编码（旺店通）" prop="productGuiGeList.outProductCode">
                      <el-input v-model="item.outProductCode" placeholder="请输入外部商品编码" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="外部商品规格编码（旺店通）">
                      <el-input v-model="item.outProductGuiGe" placeholder="请输入外部商品规格编码" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="（推荐官）一级售价">
                      <el-input v-model="item.role3SalePrice" placeholder="请输入一级售价" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <ElCol :md="6">
                    <ElFormItem label="（推荐官）二级售价">
                      <el-input v-model="item.role2SalePrice" placeholder="请输入二级售价" type="number" />
                    </ElFormItem>
                  </ElCol>
                  <!-- <ElCol :md="6">
                    <ElFormItem label="描述">
                      <el-input v-model="item.desp" placeholder="请输入描述" type="textarea" />
                    </ElFormItem>
                  </ElCol> -->
                </ElRow>
              </el-collapse-item>
            </el-collapse>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="券配置">
        <ElRow :gutter="20">
          <ElCol :md="10">
            <ElFormItem label="赠品券购买限制" prop="relateTicketBuyLimit">
              <el-input v-model="ruleForm.relateTicketBuyLimit" placeholder="请输入购买限制" type="number" />
              <span class="tag">0为最多用一张，1必须用一张券，2为最多用2张券</span>
            </ElFormItem>
          </ElCol>
          <ElCol :md="10">
            <ElFormItem label="购买后发券ID" prop="buyedFaTicketId">
              <el-input v-model="ruleForm.buyedFaTicketId" placeholder="请输入发券ID" type="number" />
              <span class="tag">0为不发券(买一件商品发一张)</span>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="发货配置">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="外部商品编码（多规格可为空）">
              <el-input
                v-model.trim="ruleForm.outProductCode" placeholder="请输入外部商品编码"
                :parser="(value: any) => {
                  value.replace(/[^a-zA-Z0-9\u4e00-\u9fa5 ]/g, '');
                }"
              />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="外部商品规格（多规格可为空）">
              <el-input v-model="ruleForm.outProductGuiGe" placeholder="请输入外部商品规格" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="是否包邮" prop="isDeliver">
              <el-radio-group v-model="ruleForm.isDeliver">
                <el-radio :value="1">
                  非偏远地区包邮
                </el-radio>
                <el-radio :value="2">
                  全地区包邮
                </el-radio>
                <el-radio :value="0">
                  不包邮
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="是否可退单" prop="isRefuned">
              <el-radio-group v-model="ruleForm.isRefuned" :disabled="ruleForm.flag === 2 || ruleForm.flag === 3">
                <el-radio :value="0">
                  不可
                </el-radio>
                <el-radio :value="1">
                  可退
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="是否允许修改收货地址" prop="isUpdateAddress">
              <el-radio-group v-model="ruleForm.isUpdateAddress">
                <el-radio :value="0">
                  不允许
                </el-radio>
                <el-radio :value="1">
                  允许
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
      <PageMain title="活动关联">
        <div class="mb-5 text-right">
          <el-button type="success" @click="AddCard('actJson')">
            添加
          </el-button>
        </div>
        <div class="card-box">
          <el-card v-for="(item, index) in ruleForm.actJson" :key="index" shadow="hover">
            <ElFormItem label="类型">
              <el-radio-group v-model="item.actType">
                <el-radio :value="1">
                  落地页
                </el-radio>
                <el-radio :value="2">
                  抽奖活动
                </el-radio>
                <el-radio :value="3">
                  福卡活动
                </el-radio>
              </el-radio-group>
            </ElFormItem>
            <ElFormItem v-if="item.actType === 1" label="落地页ID">
              <el-input v-model="item.actId" style="width: 200px;" placeholder="请输入落地页ID" />
            </ElFormItem>
            <ElFormItem v-if="item.actType === 1" label="会员里关联券id">
              <el-input v-model="item.vipGiftTicketId" style="width: 200px;" placeholder="请输入券ID" />
            </ElFormItem>
            <ElFormItem v-if="item.actType === 2 || item.actType === 3" :label="`${item.actType === 2 ? '抽奖' : '福卡'}活动ID`">
              <el-input v-model="item.actId" style="width: 200px;" placeholder="请输入活动ID" />
            </ElFormItem>
            <ElFormItem v-if="item.actType === 3" label="关联类型">
              <el-radio-group v-model="item.focaType">
                <el-radio :value="1">
                  发福卡机会
                </el-radio>
                <el-radio :value="2">
                  领取任意福卡
                </el-radio>
              </el-radio-group>
            </ElFormItem>
            <template #footer>
              <div class="text-right">
                <el-button type="danger" @click="DeleteItem(index, 'actJson')">
                  删除
                </el-button>
              </div>
            </template>
          </el-card>
        </div>
      </PageMain>
      <PageMain title="图片模块">
        <div class="mb-5 text-right">
          <el-button type="success" @click="AddCard('picMoudle')">
            添加
          </el-button>
        </div>
        <div class="card-box">
          <el-card v-for="(item, index) in ruleForm.picMoudle" :key="index" shadow="hover">
            <ElFormItem label="跳转路径">
              <el-input v-model="item.href" placeholder="请输入跳转路径" />
            </ElFormItem>
            <ElFormItem label="上传图片">
              <ImageUpload
                :ext="['jpg', 'png']"
                :size="5" :max="1"
                :url="item.pic"
                width="auto"
                :height="100"
                @on-success="(url) => handleUploadSuccess(url, 'picMoudle', 'list', index)"
              />
            </ElFormItem>
            <template #footer>
              <div class="text-right">
                <el-button type="danger" @click="DeletePicMoudle(index)">
                  删除
                </el-button>
              </div>
            </template>
          </el-card>
        </div>
      </PageMain>
      <PageMain title="其他">
        <ElRow :gutter="20">
          <ElCol :md="8">
            <ElFormItem label="是否在商城展示" prop="displayInShop">
              <el-radio-group v-model="ruleForm.displayInShop">
                <el-radio :value="0">
                  不展示
                </el-radio>
                <el-radio :value="1">
                  展示
                </el-radio>
              </el-radio-group>
            </ElFormItem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 80px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData(ruleFormRef)">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

  <style lang="scss" scoped>
  :deep(.el-date-editor) {
    width: 100%;
  }

  .tag {
    margin-left: 10px;
    color: red;
  }

  .card-box {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-gap: 10px;
  }
  </style>
